<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"gz1234.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="cache-loader 和 hard-source-webpack-plugin 的 区 别是 什 么 ？Babel-profill：怎么把 es6 转化为 es5，兼容 ie Parser 解析第一步主要是将 ES6 语法解析为 AST 抽象语法树。  Transformer 转换第二步是将打散的 AST 语法通过配置好的 plugins 和 presets 转换成新的 AST 语法。这一步主">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack面试题">
<meta property="og:url" content="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/index.html">
<meta property="og:site_name" content="郭泽">
<meta property="og:description" content="cache-loader 和 hard-source-webpack-plugin 的 区 别是 什 么 ？Babel-profill：怎么把 es6 转化为 es5，兼容 ie Parser 解析第一步主要是将 ES6 语法解析为 AST 抽象语法树。  Transformer 转换第二步是将打散的 AST 语法通过配置好的 plugins 和 presets 转换成新的 AST 语法。这一步主">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/sourceMap.png">
<meta property="article:published_time" content="2020-10-29T03:09:28.000Z">
<meta property="article:modified_time" content="2023-06-06T01:12:27.778Z">
<meta property="article:author" content="郭泽">
<meta property="article:tag" content="webpack面试题">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/sourceMap.png">


<link rel="canonical" href="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/","path":"2020/10/29/前端面试题/webpack面试题/","title":"webpack面试题"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>webpack面试题 | 郭泽</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">郭泽</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#cache-loader-%E5%92%8C-hard-source-webpack-plugin-%E7%9A%84-%E5%8C%BA-%E5%88%AB%E6%98%AF-%E4%BB%80-%E4%B9%88-%EF%BC%9F"><span class="nav-number">1.</span> <span class="nav-text">cache-loader 和 hard-source-webpack-plugin 的 区 别是 什 么 ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Babel-profill%EF%BC%9A%E6%80%8E%E4%B9%88%E6%8A%8A-es6-%E8%BD%AC%E5%8C%96%E4%B8%BA-es5%EF%BC%8C%E5%85%BC%E5%AE%B9-ie"><span class="nav-number">2.</span> <span class="nav-text">Babel-profill：怎么把 es6 转化为 es5，兼容 ie</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-plugin-%E7%9A%84-%E5%8E%9F-%E7%90%86-%E6%98%AF-%E4%BB%80-%E4%B9%88-%EF%BC%9F"><span class="nav-number">3.</span> <span class="nav-text">webpack plugin 的 原 理 是 什 么 ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#plugin-%E4%B8%AD-%E6%9C%89-%E5%BC%82-%E6%AD%A5-%E8%AF%B7-%E6%B1%82-%E4%BC%9A-%E9%98%BB-%E5%A1%9E-%E5%90%8E-%E9%9D%A2-%E7%9A%84-plugin-%E5%90%97-%EF%BC%9F"><span class="nav-number">4.</span> <span class="nav-text">plugin 中 有 异 步 请 求 会 阻 塞 后 面 的 plugin 吗 ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E7%9A%84-sourcemap-%EF%BC%9F"><span class="nav-number">5.</span> <span class="nav-text">webpack 的 sourcemap ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#hard-sour-c-e-webpack-plugin-%E6%98%AF-%E6%80%8E-%E4%B9%88-%E5%81%9A-%E7%BC%93-%E5%AD%98-%E7%9A%84-%EF%BC%9F-%E4%BF%AE-%E6%94%B9-%E6%96%87-%E4%BB%B6-%E5%90%8E-%E4%BC%9A%E6%80%8E-%E4%B9%88-%E6%A0%B7-%EF%BC%9F"><span class="nav-number">6.</span> <span class="nav-text">hard-sour c e-webpack-plugin 是 怎 么 做 缓 存 的 ？ 修 改 文 件 后 会怎 么 样 ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#parallel-%E7%9A%84-%E5%8E%9F-%E7%90%86-%E6%98%AF-%E4%BB%80-%E4%B9%88-%EF%BC%9F-%E5%A4%9A-%E4%B8%AA-%E5%AD%90-%E8%BF%9B-%E7%A8%8B-%E6%80%8E-%E4%B9%88-%E9%80%9A-%E4%BF%A1-%EF%BC%9F"><span class="nav-number">7.</span> <span class="nav-text">parallel 的 原 理 是 什 么 ？ 多 个 子 进 程 怎 么 通 信 ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E4%B8%8E-gulp-grunt"><span class="nav-number">8.</span> <span class="nav-text">webpack 与 gulp&#x2F;grunt</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="nav-number">9.</span> <span class="nav-text">webpack 的核心概念</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E8%A7%81%E7%9A%84Loader%EF%BC%9F%E4%BB%96%E4%BB%AC%E6%98%AF%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%E7%9A%84%EF%BC%9F"><span class="nav-number">10.</span> <span class="nav-text">有哪些常见的Loader？他们是解决什么问题的？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E8%A7%81%E7%9A%84Plugin%EF%BC%9F%E4%BB%96%E4%BB%AC%E6%98%AF%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%E7%9A%84%EF%BC%9F"><span class="nav-number">11.</span> <span class="nav-text">有哪些常见的Plugin？他们是解决什么问题的？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E6%A8%A1%E5%9D%97%E5%8C%96%E6%89%93%E5%8C%85%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%B5%81%E7%A8%8B"><span class="nav-number">12.</span> <span class="nav-text">webpack 模块化打包的基本流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%AF%94%E8%BE%83-loader-%E4%B8%8E-plugin"><span class="nav-number">13.</span> <span class="nav-text">比较 loader 与 plugin</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E6%89%93%E5%8C%85%E5%90%8E%E6%96%87%E4%BB%B6%E4%BD%93%E7%A7%AF%E8%BF%87%E5%A4%A7%E6%80%8E%E4%B9%88%E5%8A%9E"><span class="nav-number">14.</span> <span class="nav-text">webpack 打包后文件体积过大怎么办</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E7%9A%84-Tree-shaking-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">15.</span> <span class="nav-text">webpack 的 Tree-shaking 是什么?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#live-reload-%E4%B8%8E-hot-realod-HMR"><span class="nav-number">16.</span> <span class="nav-text">live-reload 与 hot-realod&#x2F;HMR</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#resolve-alias-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9B%BF%E6%8D%A2"><span class="nav-number">17.</span> <span class="nav-text">resolve.alias 字符串替换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack%E6%96%87%E4%BB%B6%E6%8C%87%E7%BA%B9%E7%AD%96%E7%95%A5%EF%BC%9Ahash-chunkhash-contenthash"><span class="nav-number">18.</span> <span class="nav-text">webpack文件指纹策略：hash chunkhash contenthash</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#module%EF%BC%8Cchunk%E5%92%8Cbundle%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">19.</span> <span class="nav-text">module，chunk和bundle的区别是什么</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-%E6%9E%84%E5%BB%BA%E4%BC%98%E5%8C%96"><span class="nav-number">20.</span> <span class="nav-text">webpack 构建优化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8D%87%E7%BA%A7-webpack5-%E4%BB%A5%E5%8F%8A%E5%91%A8%E8%BE%B9%E6%8F%92%E4%BB%B6%E5%90%8E%EF%BC%8C%E4%BB%A3%E7%A0%81%E9%9C%80%E8%A6%81%E5%81%9A%E5%87%BA%E7%9A%84%E8%B0%83%E6%95%B4"><span class="nav-number">21.</span> <span class="nav-text">升级 webpack5 以及周边插件后，代码需要做出的调整</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">郭泽</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">54</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">51</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="webpack面试题 | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          webpack面试题
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-29 11:09:28" itemprop="dateCreated datePublished" datetime="2020-10-29T11:09:28+08:00">2020-10-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-06-06 09:12:27" itemprop="dateModified" datetime="2023-06-06T09:12:27+08:00">2023-06-06</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端面试题</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="cache-loader-和-hard-source-webpack-plugin-的-区-别是-什-么-？"><a href="#cache-loader-和-hard-source-webpack-plugin-的-区-别是-什-么-？" class="headerlink" title="cache-loader 和 hard-source-webpack-plugin 的 区 别是 什 么 ？"></a>cache-loader 和 hard-source-webpack-plugin 的 区 别是 什 么 ？</h2><h2 id="Babel-profill：怎么把-es6-转化为-es5，兼容-ie"><a href="#Babel-profill：怎么把-es6-转化为-es5，兼容-ie" class="headerlink" title="Babel-profill：怎么把 es6 转化为 es5，兼容 ie"></a>Babel-profill：怎么把 es6 转化为 es5，兼容 ie</h2><ul>
<li><p>Parser 解析<br>第一步主要是将 ES6 语法解析为 AST 抽象语法树。</p>
</li>
<li><p>Transformer 转换<br>第二步是将打散的 AST 语法通过配置好的 plugins 和 presets 转换成新的 AST 语法。这一步主要是由 babel-transform 插件完成。plugins 和 presets 通常在 .babelrc 文件中配置。</p>
</li>
<li><p>Generator 生成<br>第三步是将新的 AST 语法树对象再生成浏览器都可以识别的 ES5 语法。这一步主要是由 babel-generator 插件完成</p>
<p>我们写的原始代码、<br>1.–&gt;parse(解析)阶段，通过–&gt;babylon 工具做代码的解析转换为–&gt;AST(抽象语法树)<br>2.–&gt;transform(改变)阶段，<br>通过—&gt;babel-traverse 工具，把代码转为 es5 或 es3，如果 babel 没有达到我们的预期 babel 还提供了很多插件可以继续转换到–&gt;AST 阶段<br>3.AST(抽象语法树)阶段–&gt;<br>通过 plugin 工具处理过滤代码(删除代码、增加代码)，在 AST 语法树上改，改完之后到—&gt;AST 这个树上，到—&gt;generator 阶段，<br>4.—&gt;generator(生成、生产)阶段<br>通过—&gt;babel-generator 工具处理还原代码，变成浏览器所识别的文本到—&gt;code,我们看到的最后编译后的代码</p>
</li>
</ul>
<h2 id="webpack-plugin-的-原-理-是-什-么-？"><a href="#webpack-plugin-的-原-理-是-什-么-？" class="headerlink" title="webpack plugin 的 原 理 是 什 么 ？"></a>webpack plugin 的 原 理 是 什 么 ？</h2><h2 id="plugin-中-有-异-步-请-求-会-阻-塞-后-面-的-plugin-吗-？"><a href="#plugin-中-有-异-步-请-求-会-阻-塞-后-面-的-plugin-吗-？" class="headerlink" title="plugin 中 有 异 步 请 求 会 阻 塞 后 面 的 plugin 吗 ？"></a>plugin 中 有 异 步 请 求 会 阻 塞 后 面 的 plugin 吗 ？</h2><h2 id="webpack-的-sourcemap-？"><a href="#webpack-的-sourcemap-？" class="headerlink" title="webpack 的 sourcemap ？"></a>webpack 的 sourcemap ？</h2><p>sourcemap 是编译后代码和原始代码的映射在生产环境，sourcemap 不能发布到线上。<br>通常的做法是上传到异常监控服务器。用于解析线上错误信息。<br><img src="/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/sourceMap.png" alt="sourceMap生成环境使用"></p>
<h2 id="hard-sour-c-e-webpack-plugin-是-怎-么-做-缓-存-的-？-修-改-文-件-后-会怎-么-样-？"><a href="#hard-sour-c-e-webpack-plugin-是-怎-么-做-缓-存-的-？-修-改-文-件-后-会怎-么-样-？" class="headerlink" title="hard-sour c e-webpack-plugin 是 怎 么 做 缓 存 的 ？ 修 改 文 件 后 会怎 么 样 ？"></a>hard-sour c e-webpack-plugin 是 怎 么 做 缓 存 的 ？ 修 改 文 件 后 会怎 么 样 ？</h2><h2 id="parallel-的-原-理-是-什-么-？-多-个-子-进-程-怎-么-通-信-？"><a href="#parallel-的-原-理-是-什-么-？-多-个-子-进-程-怎-么-通-信-？" class="headerlink" title="parallel 的 原 理 是 什 么 ？ 多 个 子 进 程 怎 么 通 信 ？"></a>parallel 的 原 理 是 什 么 ？ 多 个 子 进 程 怎 么 通 信 ？</h2><h2 id="webpack-与-gulp-grunt"><a href="#webpack-与-gulp-grunt" class="headerlink" title="webpack 与 gulp/grunt"></a>webpack 与 gulp/grunt</h2><ul>
<li>webpack 是一种模块化打包工具，主要用于模块化方案，预编译模块的方案。</li>
<li>Grunt/Gulp 是非模块化打包工具, 是工具链，可以配合各种插件做 js 压缩，css 压缩，less 编译 替代手工实现自动化工作</li>
</ul>
<h2 id="webpack-的核心概念"><a href="#webpack-的核心概念" class="headerlink" title="webpack 的核心概念"></a>webpack 的核心概念</h2><ul>
<li>Entry：入口，Webpack 进行打包的起始点(文件)</li>
<li>Output：出口，webpack 编译打包生成的 bundle(文件)</li>
<li>Loader：模块加载(转换)器，将非 js 模块包装成 webpack 能理解的 js 模块</li>
<li>Plugin：插件，在 Webpack 构建流程中的特定时机插入具有特定功能的代码</li>
<li>Module：模块，在 Webpack 眼里一切皆模块，默认只识别 js 文件, 如果是其它类型文件利用对应的 loader 转换为 js 模块</li>
<li>Chunk/bundle：代码块/束，一个 Chunk 由多个模块组合而成, 最终浏览器执行的是 webpack 打包生成的 chunk 文件</li>
</ul>
<h2 id="有哪些常见的Loader？他们是解决什么问题的？"><a href="#有哪些常见的Loader？他们是解决什么问题的？" class="headerlink" title="有哪些常见的Loader？他们是解决什么问题的？"></a>有哪些常见的Loader？他们是解决什么问题的？</h2><ul>
<li>file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件</li>
<li>url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去</li>
<li>source-map-loader：加载额外的 Source Map 文件，以方便断点调试</li>
<li>image-loader：加载并且压缩图片文件</li>
<li>babel-loader：把 ES6 转换成 ES5</li>
<li>css-loader：加载 CSS，支持模块化、压缩、文件导入等特性</li>
<li>style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。</li>
<li>eslint-loader：通过 ESLint 检查 JavaScript 代码</li>
</ul>
<h2 id="有哪些常见的Plugin？他们是解决什么问题的？"><a href="#有哪些常见的Plugin？他们是解决什么问题的？" class="headerlink" title="有哪些常见的Plugin？他们是解决什么问题的？"></a>有哪些常见的Plugin？他们是解决什么问题的？</h2><p>clean-webpack-plugin：重新打包自动清空 dist 目录<br>compression-webpack-plugin: 将前端打包好的资源文件进一步压缩，生成指定的、体积更小的压缩文件<br>html-webpack-plugin：可以复制一个有结构的html文件，并自动引入打包输出的所有资源（JS/CSS）<br>mini-css-extract-plugin：提取 js 中的 css 成单独文件<br>optimize-css-assets-webpack-plugin, terser-webpack-plugin：压缩css<br>uglifyjs-webpack-plugin：压缩js<br>define-plugin: 用于定义环境变量<br>commons-chunk-plugin：提取公共代码<br>Copy-webpack-plugin: 用于将静态文件直接复制到输出目录中。<br>webpack-bundle-analyzer: 用于分析并可视化打包后的模块大小和依赖关系</p>
<h2 id="webpack-模块化打包的基本流程"><a href="#webpack-模块化打包的基本流程" class="headerlink" title="webpack 模块化打包的基本流程"></a>webpack 模块化打包的基本流程</h2><ul>
<li>连接: webpack 从入口 JS 开始, 递归查找出所有相关联的模块, 并<code>连接</code>起来形成一个图(网)的结构</li>
<li>编译: 将 JS 模块中的模块化语法<code>编译</code>为浏览器可以直接运行的模块语法(当然其它类型资源也会处理)</li>
<li>合并: 将图中所有编译过的模块<code>合并</code>成一个或少量几个 bundle 文件, 而浏览器运行是打包生成的 bundle 文件</li>
</ul>
<h2 id="比较-loader-与-plugin"><a href="#比较-loader-与-plugin" class="headerlink" title="比较 loader 与 plugin"></a>比较 loader 与 plugin</h2><p><strong>不同的作用</strong></p>
<ul>
<li><strong>Loader</strong>直译为”加载器”。Webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。</li>
<li><strong>Plugin</strong>直译为”插件”。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。</li>
</ul>
<p><strong>不同的用法</strong></p>
<ul>
<li><strong>Loader</strong>在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）</li>
<li><strong>Plugin</strong>在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。</li>
</ul>
<h2 id="webpack-打包后文件体积过大怎么办"><a href="#webpack-打包后文件体积过大怎么办" class="headerlink" title="webpack 打包后文件体积过大怎么办"></a>webpack 打包后文件体积过大怎么办</h2><ul>
<li>异步加载模块（代码分割）；提取第三方库（使用 cdn 或者 vender）；代码压缩；去除不必要的插件；去除 devtool 选项等等</li>
</ul>
<h2 id="webpack-的-Tree-shaking-是什么"><a href="#webpack-的-Tree-shaking-是什么" class="headerlink" title="webpack 的 Tree-shaking 是什么?"></a>webpack 的 Tree-shaking 是什么?</h2><ul>
<li><p>Webpack 在打包 js 模块时, 会将模块中向外暴露但没有被使用的功能从打包文件中移除<br>2 个前提:<br>必须是使用 ES6 的 export 向外暴露的<br>必须进行 JS 的压缩处理</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">optimization: &#123;<span class="attr">usedExports</span>: <span class="literal">true</span>,&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="live-reload-与-hot-realod-HMR"><a href="#live-reload-与-hot-realod-HMR" class="headerlink" title="live-reload 与 hot-realod/HMR"></a>live-reload 与 hot-realod/HMR</h2><ul>
<li>相同点: 代码修改后都会自动重新编译打包</li>
<li>不同点:<ul>
<li>live-reload: 刷新整体页面, 从而查看到最新代码的效果, 页面状态全部都是新的</li>
<li>Hot-reload: 没有刷新整个页面, 只是加载了修改模块的打包文件并运行,从而更新页面的局部界面, 整个界面的其它部分的状态还在</li>
</ul>
</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7011765691812413476">webpack</a></p>
<h2 id="resolve-alias-字符串替换"><a href="#resolve-alias-字符串替换" class="headerlink" title="resolve.alias 字符串替换"></a>resolve.alias 字符串替换</h2><h2 id="webpack文件指纹策略：hash-chunkhash-contenthash"><a href="#webpack文件指纹策略：hash-chunkhash-contenthash" class="headerlink" title="webpack文件指纹策略：hash chunkhash contenthash"></a>webpack文件指纹策略：hash chunkhash contenthash</h2><p>hash策略：是以项目为单位的，项目内容改变则会生成新的hash，内容不变则hash不变<br>​<br>chunkhash策略：是以chunk为单位的，当一个文件内容改变，则整个相应的chunk组模块的hash回发生改变<br>​<br>contenthash策略：是以自身内容为单为的<br>​<br>推荐使用：css ：contenthash<br>​<br>•js：chunkhash</p>
<h2 id="module，chunk和bundle的区别是什么"><a href="#module，chunk和bundle的区别是什么" class="headerlink" title="module，chunk和bundle的区别是什么"></a>module，chunk和bundle的区别是什么</h2><ul>
<li>在src目录下，我们手写的一个个文件，无论是EcmaScript还是CommonJS，它们都是module。</li>
<li>当我们写的module源文件传到webpack进行打包时，webpack会根据文件引用关系（entry import splitChunk）生成chunk文<br>件，webpack会对这个chunk文件进行一些操作(相当于是内存文件)。</li>
<li>webpack处理好chunk文件后，最后会输出bundle文件，这个bundle文件包含了经过加载和编译<br>的最终源文件，所以可以直接在浏览器中运行。</li>
</ul>
<h2 id="webpack-构建优化"><a href="#webpack-构建优化" class="headerlink" title="webpack 构建优化"></a>webpack 构建优化</h2><ul>
<li><p>优化babel-loader use:[‘babel-loader?cacheDirectory’] 开启缓存  明确文件范围 include  exclude</p>
</li>
<li><p>IgnorePlugin 避免引入无用的插件忽略第三方包指定目录，让这些指定目录不要被打包进去</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">plugins:[</span><br><span class="line">  <span class="comment">//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去 手动引入需要的语言包</span></span><br><span class="line">  <span class="keyword">new</span> Webpack.IgnorePlugin(<span class="regexp">/\.\/locale/</span>,<span class="regexp">/moment/</span>),</span><br><span class="line">  </span><br><span class="line">]</span><br></pre></td></tr></table></figure>
</li>
<li><p>noParse 避免重复打包， 一般使用.min.js结尾的文件，都是已经经过模块化处理的，不再参与loader或webpack的解析及打包</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>:&#123;</span><br><span class="line">  noParse:[] <span class="comment">// RegExp [RegExp] function(resource) string [string]</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>happyPack 多进程打包  </p>
</li>
</ul>
<h2 id="升级-webpack5-以及周边插件后，代码需要做出的调整"><a href="#升级-webpack5-以及周边插件后，代码需要做出的调整" class="headerlink" title="升级 webpack5 以及周边插件后，代码需要做出的调整"></a>升级 webpack5 以及周边插件后，代码需要做出的调整</h2><ul>
<li>package.json 的 dev-server 命令改了”dev”: “webpack serve –config buildwebpack.dev.js”</li>
<li>升级新版本const { merge } = require(‘webpack-merge’)</li>
<li>升级新版本const [ CleanWebpackPlugin }= require(‘clean-webpack-plugin’)</li>
<li>module.rules’中loader: [‘xxx-loader’] 换成use: [‘xxx-loader’]</li>
<li>filename:bundle.[contenthash:8].js’、其中h’ 小写，不能大写</li>
</ul>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/webpack%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="tag"># webpack面试题</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="prev" title="前端性能优化面试题">
                  <i class="fa fa-chevron-left"></i> 前端性能优化面试题
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/vue%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="next" title="vue面试题">
                  vue面试题 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郭泽</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js","integrity":"sha256-tu9j5pBilBQrWSDePOOajCUdz6hWsid/lBNzK4KgEPM="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>

  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.3/mermaid.min.js","integrity":"sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>


  





</body>
</html>
